<template>
	<div class="cardDetail">
        <div class="barCode">
            <img src="" alt="">
            <p>点击查看条形码</p>
        </div>
        <div class="QRCode">
            <div class="QRCode_box">
                <qrcode :value="payCode"></qrcode>
            </div>

        </div>
        <div class="payPrice">
            <p>可用余额：<span>{{balanceAmount}}元</span></p>
            <p>购买时间：<span>{{gmData}}</span></p>
            <p>到期时间：<span>{{expireDate}}</span></p>
        </div>
        <div class="cardpay_btn">
            <button class="cardpay" @click="recharge">充值</button>
        </div>
        <div class="cardNot" v-show="show1">
            <i></i>
            <p>此卡非本店发行的预付卡</p>
            <button class="cardpop_btn" @click="cardpopBtn">确定</button>
        </div>
        <div v-show="show2" class="payNot">
            <b @click="popshow"></b>
            <h5>预付卡余额不足</h5>
            <p>付款金额：<span>200元</span></p>
            <p>预付卡可用余额：<span>200元</span></p>
            <p>您需要：</p>
            <button class="paypop_btn" @click="paypopBtn">预付卡购买</button>
        </div>
        <div class="popupBg" v-show="showBg" @click="popshow"></div>
	</div>
</template>
<script>
	import {CellFormPreview,FormPreview,Qrcode} from 'vux'
import store from "./mystore.js"
import  * as stores from "./mystores.js"
	export default {
		data (){
			return {
                show1:this.show1,
                show2:this.show2,
                showBg:this.showBg,
                payCode:this.payCode,
                balanceAmount:this.balanceAmount,//可用余额
                gmData:this.gmData, //购买时间
                expireDate:this.expireDate,//到期时间

            }
        },
		components: {
            Qrcode,
            FormPreview,
			CellFormPreview
		},
        beforeCreate:function(){
            let card_no = localStorage.getItem('card_no')
            let cardNo ={"valueInfo":{"cardNo":card_no}}
            let cardno={"cardNo":card_no};
            let xx = localStorage.getItem('sessionId'); this.$http.post("http://192.168.100.106:8881/top/api/userCard/getUserCardInfo",cardNo,{headers: {
        userSessionId: xx    }}).then(function(res){
                if(res.body.returnCode == 0){
                    var a=res.body.returnValue;
                    this.cardValue=a;
                    this.show1=false;
                    this.show2=false;
                    this.showBg=false;
                    this.gmData = new Date(a.gmtCreate).toLocaleDateString();//购买时间
                    this.expireDate = new Date(a.expireDate).toLocaleDateString();//剩余时间
                    this.balanceAmount=a.balanceAmount;//可用余额
                }
            },function(){
                alert('请求失败处理');   //失败处理
            }), this.$http.post("http://192.168.100.106:8881/top/api/users/getUserPayQrCode",cardno,{headers: {userSessionId: xx }}).then(function(res){
                if(res.body.returnCode == 0){
                    this.payCode=res.body.returnValue.payCode;
                    window.localStorage.setItem('qrcode',this.payCode);

                }
            },function(){
                alert('请求失败处理');   //失败处理
            })

        },
        mounted () {
            setInterval(() => {
               let card_no = localStorage.getItem('card_no')
               let cardno={"cardNo":card_no}; this.$http.post("http://192.168.100.106:8881/top/api/users/getUserPayQrCode",cardno).then(function(res){
                    if(res.body.returnCode == 0){
                        this.payCode=res.body.returnValue.payCode;
                        window.localStorage.setItem('qrcode',this.payCode);

                    }
                },function(){
                    alert('请求失败处理');   //失败处理
                })
            }, 60000)
//            setInterval(() => {
//               var qrcode = this.payCode
//               window.localStorage.setItem('qrcode',qrcode);
//               let qrCode={"qrCode":qrcode};
//               let xx = localStorage.getItem('sessionId');
//                this.$http.post("http://192.168.100.106:8881/top/api/order/getUserOrderInfoByQrCode",qrCode,{headers: {
//        userSessionId: xx    }}).then(function(res){
//                    if(res.body.returnCode == 0){
//                        var a=res.body.returnValue.payCode;
//                        this.$router.push('/DealSuc')
//                    }
//                },function(){
//                    alert('请求失败处理');   //失败处理
//                })
//            }, 5000)

        },
		methods: {


			recharge: function () {
                this.$router.push('/ShopPay')
			},
            cardpopBtn: function () {
                this.$router.push('/MyCardPack')
			},
            popshow: function(){
                this.show1=false;
                this.show2=false;
                this.showBg=false;
            },
            paypopBtn: function(){
                this.$router.push('/ShopPay')
            }


		}
	}
	</script>
<style>
    body{background:#efeff8;}
    .cardDetail{position: relative; top:0;}
    .cardDetail .QRCode{width:100%; text-align:center; margin-bottom:4vh; margin-top:2vh;}
    .cardDetail .QRCode img{width:100%; height:100%;}
    .QRCode .QRCode_box{padding:2.6vw; display:inline-block;width:33.4vw; height:33.4vw; border-radius:2vw; background:#fff;}
    .cardDetail .barCode img{display:block; text-align:center;padding:0; padding-top:6.7vh; font-size:0;  margin:auto; width:60vw;height:14.2vh;}
    .cardDetail .barCode p{text-align: center; font-size:4vw;line-height:9.1vw;}
    .cardDetail .weui-media-box_appmsg .weui-media-box__hd{display:inline-block;width:60vw;height:14.2vh; margin:0; overflow:hidden;}
    .cardDetail .weui-media-box_appmsg .weui-media-box__bd p{font-size:0;}
    .cardDetail .weui-media-box_appmsg .weui-media-box__bd h4{line-height:5.1vh; font-size:4vw; margin:0;}
    .cardDetail .weui-panel:after,.cardDetail .weui-form-preview:before,.paySuc .weui-form-preview:after,.cardDetail .weui-form-preview__ft:after{border:0;}
    .cardDetail .payPrice{padding:0 3.2vw 3.3vh 3.2vw;background:#fff; overflow: hidden;}
    .cardDetail .payPrice p{height:4vw; font-size:4vw; line-height:4vw; margin-top:2.5vh; color:#939393;}
    .cardDetail .payPrice p span{float:right;}
    .cardDetail .cardpay_btn{width:100%;  background:#fff; text-align:center;}
    .cardDetail .cardpay{display:inline-block;width:93.6vw; font-size:4.5vw; color:#b49436;  line-height:12vw; border:0; outline:none; background: none;border-top:1px solid #d7d7d7;}
/*    card popup*/
    .cardNot {width:69.3vw; height:50vw; background-color:#fff;margin:0 auto;border-radius:2.5vw; overflow: hidden; text-align: center; font-size:0; background:#efeff8; z-index:99;position: fixed; top:50%; left:50%; margin-top:-25vw; margin-left:-34.5vw;}
    .cardNot p{font-size:4.4vw; font-weight:bold; margin-top:16vw;}
    .cardNot .cardpop_btn{width:60vw; border:0; outline:none; background:#fff; height:10vw; border-radius:2vw; color:#b49436; margin-top:10vw;font-size:4vw;}
  /*    pay popup*/
    .popupBg{background:rgba(0,0,0,.4); width:100%; height:100%;position: fixed; top:0; left:0;z-index:2;}
    .payNot{width:100%; background:#efeff8; position:fixed; bottom:20vw; left:0; text-align: center;z-index:99}
    .payNot b{background-image:url(../assets/img/icon_delete@2x.png); background-repeat:no-repeat; background-size:contain; background-position:center; position:absolute; top:4.4vw ; right:4.4vw; width:4.6vw; height:4.6vw;}
    .payNot h5{font-size:4.4vw; line-height:14vw; border-bottom:1px solid #d7d7d7; margin-bottom:4vw;}
    .payNot p{font-size:4vw; line-height:10vw; padding:0 3.2vw;text-align: left;}
    .payNot p span{float:right;}
    .payNot .paypop_btn{width:90vw; border:0; outline:none; background:#fff; height:12vw; border-radius:2vw; color:#b49436; margin-top:10vw;font-size:4vw; margin-bottom:12vw;}

</style>
